<template>
	<div>

		<div class="row">
			<div class="col-lg-12">
				<div class="panel">
					<div class="panel-heading bk-bg-primary">
						<h6><i class="fa fa-table red"></i><span class="break"></span>新增订单</h6>
					</div>

					<div class="panel-body">
						<div class="form-horizontal ">

							<div class="form-group">
								<label class="col-md-3 control-label">业务员</label>
								<div class="col-md-9">
									<select name="name" class="form-control" size="1" v-model="salesId">
										<option v-for="(opts, key) in salesman.result" :value="opts.id">{{opts.description}}({{opts.username}})</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">客户名称</label>
								<div class="col-md-9">
									<select name="name" class="form-control" size="1" v-model="customerId">
										<option v-for="(opts, key) in customers.result" :value="opts.id">{{opts.description}}({{opts.username}})</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">运营商</label>
								<div class="col-md-9">
									<select name="yys" class="form-control" size="1" v-model="operatorId">
										<option v-for="(opts, key) in operatorList.result" :value="key">{{opts}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">卡类型</label>
								<div class="col-md-9">
									<select name="cardtype" class="form-control" size="1" v-model="cardTypeId">
										<option v-for="(opts, key) in orderCardType.result" :value="key">{{opts}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">套餐类型</label>
								<div class="col-md-9">
									<select name="cardtype" class="form-control" size="1" v-model="packType">
										<option v-for="(opts, key) in packageType.result" :value="key">{{opts}}</option>
									</select>
								</div>
							</div>
							<div class="form-group" v-if="roleInfo.role === 'ROLE_ADMIN' || roleInfo.role === 'ROLE_SALES_DIRECTOR'">
								<label class="col-md-3 control-label">原始套餐</label>
								<div class="col-md-9">
									<select name="ystc" class="form-control" size="1" v-model="originPackage">
										<option v-for="(opts, key) in basicsPackage.result" :value="opts.packageCode">{{opts.packageName}}</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">销售套餐</label>
								<div class="col-md-9">
									<select name="cardtype" class="form-control" size="1" v-model="packList">
										<option v-for="(opts, key) in packageList.result" :value="opts.packageCode">{{opts.packageName}}</option>
									</select>
								</div>
							</div>
							<!--<div class="form-group">
								<label class="col-md-3 control-label">销售套餐</label>
								<div class="col-md-9">
									<select name="xstc" class="form-control" size="1" v-model="originPackage">
										<option v-for="(opts, key) in basicsPackage.result" :value="opts.packageCode">{{opts.packageName}}</option>
									</select>
								</div>
							</div>-->
							<div class="form-group">
								<label class="col-md-3 control-label">订购数量</label>
								<div class="col-md-9">
									<input type="text" maxlength="6" name="text-input" class="form-control" placeholder="订购数量" v-model="buyNum" @blur="getNoList">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">号码划拨</label>
								<div class="col-md-9">
									<input type="text" name="text-input" class="form-control" placeholder="号码划拨" v-model="transferList" disabled>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">订购周期</label>
								<div class="col-md-9">
									<select name="name" class="form-control" size="1" v-model="buyPeriod">
										<option value="1">1个月</option>
										<option value="2">2个月</option>
										<option value="3">3个月</option>
										<option value="4">4个月</option>
										<option value="5">5个月</option>
										<option value="6">6个月</option>
										<option value="7">7个月</option>
										<option value="8">8个月</option>
										<option value="9">9个月</option>
										<option value="10">10个月</option>
										<option value="11">11个月</option>
										<option value="12">12个月</option>
										<option value="24">两年</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">测试沉默期</label>
								<div class="col-md-9">
									<select name="hmhb" class="form-control" size="1" v-model="silencePeriod">
										<option value="0">0个月</option>
										<option value="1">1个月</option>
										<option value="2">2个月</option>
										<option value="3">3个月</option>
										<option value="4">4个月</option>
										<option value="5">5个月</option>
										<option value="6">6个月</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">流量预警</label>
								<div class="col-md-9">
									<select name="datausage" class="form-control" size="1" v-model="datausagealert">
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">流量共享</label>
								<div class="col-md-9">
									<select name="llgx" class="form-control" size="1" v-model="shared">
										<option value="1">是</option>
										<option value="0">否</option>
									</select>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">套餐入库价格</label>
								<div class="col-md-9">
									<input type="text" maxlength="6" name="text-input" class="form-control" placeholder="套餐入库价格" v-model="stockPrice">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">订购单价</label>
								<div class="col-md-9">
									<input type="text" maxlength="4" name="text-input" class="form-control" placeholder="订购单价" v-model="unitPrice">
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">订单金额</label>
								<div class="col-md-9">
									<input type="text" maxlength="6" name="text-input" class="form-control" placeholder="订单金额" v-model="totalPrice" disabled>
								</div>
							</div>
							<div class="form-group">
								<label class="col-md-3 control-label">备注</label>
								<div class="col-md-9">
									<textarea id="textarea-input" name="textarea-input" rows="6" class="form-control" placeholder="备注" v-model="comments"></textarea>
								</div>
							</div>
              <div class="form-group">
                <label class="col-md-3 control-label"></label>
                <div class="col-md-9">
                  <input type="button" class="btn btn-primary button-previous" name="previous" value="提交" @click="orderAdd">
                </div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>

	</div>
</template>
<script>

	import {mapGetters} from 'vuex'

	export default{
		name: 'home',
		computed: {
			...mapGetters({
				navStatus: 'getNavStatus',
				roleInfo: 'getRoleInfo',
				operatorList: 'getOrderOperator',
				orderCardType: 'getOrderCardType',
				basicsPackage: 'getBasicsPackage',
				salesman: 'getSalesman',
				customers: 'getCustomers',
				transfer: 'getTransfer',
				packageType: 'getPackageType',
				packageList: 'getPackageList'
			})
		},
		data () {
			return {
				salesId: '',        // 业务员ID
				customerId: '',     // 客户ID
				operatorId: '10086',// 运营商ID
				cardTypeId: '',     // 卡类型ID
				originPackage: '',  // 原始套餐
				soldPackage: '',    // 销售套餐
				buyNum: '',         // 购买数量
				buyPeriod: '',      // 订购周期
				silencePeriod: '',  // 测试沉默期
				datausagealert: '', // 流量预警
				shared: '',         // 流量共享
				stockPrice: '',     // 入库价格
				unitPrice: '',      // 订购单价
				totalPrice: '',     // 订单金额
				comments: '',       // 备注
				ids: '',            // 被划拨的号码的ID拼装成(格式:1,2,3)
				transferList: '',   // 划拨号码群
				packType: '',    // 套餐类型
				packList: '',    // 套餐列表
			}
		},
		methods: {
			getTransfers () {
				let params = {
					operatorId: this.operatorId,
					cardTypeId: this.cardTypeId,
					buyNum: this.buyNum,
					packageCode: this.originPackage
				}
				this.$store.dispatch('fetchCardTransfer', params)
			},
			getNoList () {
				if(this.buyNum == '' || this.buyNum == '0') {
					alert('订购数量不可为空或0')
					return
				}
				if( this.buyNum
						&& this.operatorId
						&& this.originPackage
						&& this.cardTypeId){
						 this.getTransfers()

				 }else {
				 	alert('请完善运营商、卡类型和原始套餐信息')
					this.buyNum = ''
					return
				}
			},
			orderAdd () {

				if(this.salesId == '') {
					alert('业务员不可为空')
					return
				}
				if(this.customerId == '') {
					alert('客户不可为空')
					return
				}
				if(this.operatorId == '') {
					alert('运营商不可为空')
					return
				}
				if(this.cardTypeId == '') {
					alert('卡类型不可为空')
					return
				}
				if(this.originPackage == '') {
					alert('原始套餐不可为空')
					return
				}
				if(this.buyNum == '' || this.buyNum == '0') {
					alert('订购数量不可为空或0')
					return
				}
				if(this.ids == '') {
					alert('没有相关库存，请提前入库')
					return
				}
				if(this.buyPeriod == '') {
					alert('订购周期不可为空')
					return
				}
				if(this.silencePeriod == '') {
					alert('测试沉默期不可为空')
					return
				}
				if(this.datausagealert == '') {
					alert('流量预警不可为空')
					return
				}
				if(this.shared == '') {
					alert('流量共享不可为空')
					return
				}
				if(this.stockPrice == '') {
					alert('入库价格不可为空')
					return
				}
				if(this.unitPrice == '') {
					alert('订购单价不可为空')
					return
				}
				if(this.totalPrice == '') {
					alert('订单金额不可为空')
					return
				}

				let params = {

					salesId: this.salesId,        // 业务员ID
					customerId: this.customerId,     // 客户ID
					operatorId: this.operatorId,     // 运营商ID
					cardTypeId: this.cardTypeId,     // 卡类型ID
					originPackage: this.originPackage,  // 原始套餐
					soldPackage: this.packList,    // 销售套餐
					buyNum: this.buyNum,         // 购买数量
					buyPeriod: this.buyPeriod,      // 订购周期
					silencePeriod: this.silencePeriod,  // 测试沉默期
					datausagealert: this.datausagealert, // 流量预警
					shared: this.shared,         // 流量共享
					stockPrice: this.stockPrice,     // 入库价格
					unitPrice: this.unitPrice,      // 订购单价
					totalPrice: this.totalPrice,     // 订单金额
					comments: this.comments,       // 备注
					ids: this.ids             // 被划拨的号码的ID拼装成(格式:1,2,3)
				}

				this.$store.dispatch('fetchOrderAdd', params)
			}
		},
		mounted () {

			// 业务员
			this.$store.dispatch('fetchSalesman')
			// 运营商
			this.$store.dispatch('fetchPackageType')
			// 套餐类型
			this.$store.dispatch('fetchOrderOperator')
			// 卡类型（初始化默认为中国移动）
			this.$store.dispatch('fetchOrderCardType', this.operatorId)

		},
		components: {
		},
		watch: {
			salesId (newVal) {

				this.$store.dispatch('fetchCustomers', {id: newVal})
			},
			// 监控运营商
			operatorId (newVal) {

				this.$store.dispatch('fetchOrderCardType', newVal)

				if(this.basicsPackage.result){
					this.basicsPackage.result.length = 0
				}
				this.buyNum = ''
				this.transferList = ''
				this.packList = ''
				this.packType = ''
				this.packageList = {}

			},
			// 监控卡类型
			cardTypeId (newVal) {

				this.transferList = ''
				this.buyNum = ''

				let params = {
					cardTypeId: newVal, //	卡类型ID	number
					operatorId: this.operatorId //	运营商ID
				}
				if(newVal){
					this.$store.dispatch('fetchBasicsPackage', params)
				}
			},
			// 监控销售套餐
			originPackage (newVal) {
				this.transferList = ''
				this.buyNum = ''
			},
			// 监控订购数量
			buyNum (newVal) {

				if(newVal <= 0){
					newVal = ''
					this.transferList = ''
				}

				if(!newVal) {
					this.totalPrice = (newVal * 1) * (this.unitPrice * 1)
				}else {
					this.totalPrice = ''
				}
			},
			// 监控号码划拨
			transfer (newVal) {

				if(!newVal.success){
					alert('卡片数量不足，请及时入库')
					return
				}
				if(this.buyNum == 1) {
					this.transferList = newVal.result[0].iccid
				}else {
					this.transferList = newVal.result[0].iccid + '-' + newVal.result[newVal.result.length-1].iccid
				}

				let self = this
				self.ids = ''
				newVal.result.forEach(function (value, i) {
					self.ids += (i <= 0) ?  value.id : "," + value.id
				});

			},
			// 订单单价
			unitPrice (newVal) {

				if(newVal) {
					this.totalPrice = (newVal * 1) * (this.buyNum * 1)
				}else {
					this.totalPrice = ''
				}
			},
			// 套餐类型
			packType (newVal) {

				let params = {
					mealType: newVal, //	卡类型ID	number
					operatorId: this.operatorId //	运营商ID
				}
				if(newVal) {
					this.$store.dispatch('fetchPackageList', params)
				}
			}
		}
	}
</script>

<style>

</style>
